<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>admin</title>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        
        <link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" />
        <link href="<c:url value="/resources/jquery/plugin/treeview/jquery.treeview.css" />" rel="stylesheet" type="text/css" />
        <link href="<c:url value="/resources/jqueryui/1.8/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />" rel="stylesheet" type="text/css" />

        <script src="<c:url value="/resources/jquery/jquery.js" />"></script>
        <script src="<c:url value="/resources/jqueryui/1.8/jquery-ui-1.8.16.custom.min.js" />"></script>
        <script src="<c:url value="/resources/jqueryui/1.8/jquery.ui.datepicker-zh-CN.js" />"></script>
        <script src="<c:url value="/resources/jquery/plugin/treeview/jquery.treeview.js" />"></script>
        <script src="<c:url value="/resources/jquery/plugin/cookie/jquery.cookie.js" />"></script>
        <script src="<c:url value="/resources/scripts/html5.js" />"></script>
        
        <style>
html, body {height:100%; margin: 0; padding: 0; }

html>body {
    font-size: 13px; 
}

#page{
    
}

header{
    line-height: 90px;
    width: 100%;
    overflow:hidden;
    background-color: #222;
    color: #fff;
}

header h1{
    margin: 0;
}

#contentwrapper{
float: left;
width: 100%;
border: dashed red 0px;
}

#contentcolumn{
margin-left: 200px; 
height: 100%;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
overflow-y: auto;
background-color: #eee;
}
#leftcolumn *{
    background-color: #eee;
}

footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
background-color: #ccc;
}

#footer a{
color: #FFFF80;
}

#content{
    height: 100%;
}

#detailFrame{
	width: 100%;
}
        </style>
    </head>
    <body>
        <div id="page">
            <header>
                <div class="innertube">
                    <h1>this is layout test</h1>
                </div>
            </header>
            <div id="contentwrapper">
                <div id="contentcolumn">
                    <div id="content"><iframe id="detailFrame" name="detailFrame" src="<c:url value="/admin/welcome" />" frameborder="0"></iframe></div>
                </div>
            </div>
            <div id="leftcolumn">
                <div class="innertube">
                    <ul id="browser" class="filetree">
                        <li><span class="folder">Category management</span>
                            <ul>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/category/list?id=100" />">category list</a></span></li>
                                <li><span class="file">category properties</span></li>
                            </ul>
                        </li>
                        <li><span class="folder">Website Management</span>
                            <ul>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/search/preUpdateIndex" />">update search engine</a></span></li>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/product/preStaticize" />">update static page</a></span></li>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/region/preStaticize" />">update region static js</a></span></li>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/category/preStaticize" />">update regiocategory static js</a></span></li>
                                <li><span class="file">other</span></li>
                            </ul>
                        </li>
                        <li class="closed"><span class="folder">Member management</span>
                            <ul>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/member/list?type=person&page=1&pageSize=10" />">person member</a></span></li>
                                <li><span class="file"><a target="detailFrame" href="<c:url value="/admin/member/list?type=company&page=1&pageSize=10" />">company member</a></span></li>
                                
                            </ul>
                        </li>
                        <li><span class="file">File 4</span></li>
                    </ul>
                </div>
            </div>
            <footer>
                this is footer.
            </footer>
        </div>



    </body>
</html>

<script>
$(document).ready(function(){
    $("#browser").treeview({unique: true});
    
    onresize = function(){
        var headerHeight = $('header').outerHeight();
        var leftHeight = $('#leftcolumn').outerHeight();
        var bodyHeight = $('body').prop('clientHeight');
        var footerheight = $('footer').outerHeight();
        var diff = bodyHeight - headerHeight - footerheight;
        if(diff <=0){
            return;
        }
        $('#leftcolumn').css({'height': diff + 'px'});
        $('#detailFrame').css({'height': diff + 'px'});
    }
    
    onresize();
});
</script>
